New features

Updated the appearance of disabled form controls

We’ve updated the disabled state of Text Input, Textarea, Select and File Upload components so it is consistent across browsers and devices. They’re also now consistent with the existing disabled styles for Buttons, Checkboxes, and Radios.

Disabled form controls appear at 50% opacity and with an alternative cursor appearance when hovered over.

This was added in pull request #3187: Add disabled styles for form controls.

Added a top-level disabled parameter to form controls

We’ve updated the Nunjucks macros for Text Input, Textarea, Select and File Upload components to include a top-level disabled parameter. This will make it easier to enable the disabled state for these controls.

{{ govukInput({
  id: "disabled-input",
  name: "disabled-input",
  value: "Unchangeable value",
  disabled: true
}) }}

Disabled form controls have poor contrast and can confuse some users, so avoid them if possible.

Only use disabled form controls if research shows it makes the user interface easier to understand.

This was added in pull request #3187: Add disabled styles for form controls.

Configure whether the Accordion remembers and restores sessions

By default, when a user leaves a page, the Accordion will remember the layout of expanded and collapsed sections selected by the user. If the user returns to the page, this layout will be restored and override any sections manually set as expanded in code.

You can now disable this functionality by using the rememberExpanded option in the govukAccordion Nunjucks macro.

If you're not using the Nunjucks macro, you can disable it using the data-remember-expanded HTML attribute.

This was added in pull request #3342: Add option to disable sessionState in Accordion.

Added id parameter to Buttons

We’ve updated the Button Nunjucks macro to include an optional id parameter.

{{ govukButton({
  text: "Save and continue",
  id: "continue-button"
}) }}

This was added in pull request #3344: Adding optional ‘id’ attribute to button component.

Thanks to Tom Billington for this contribution.

Added a modifier for text input styles that accept sequences of digits

We've added a new .govuk-input--extra-letter-spacing class for Text Input. This increases readability of text inputs that receive sequences of digits (like security codes, references or phone numbers).

You can add it through the classes option when using Nunjucks, or directly in the class attribute of the <input> when using HTML.

This was added in pull request #2230: Add extra letter spacing modifier for inputs

Deprecated features

Stop using JavaScript API properties other than the init method

We have deprecated all of the JavaScript properties in the API, except for the init method for each component. We'll make all of the deprecated JavaScript properties private in our next main release.

Please let us know if you're using parts of the API other than the init method by filling in this form. We'll use this information when prioritising future additions to the public API.

This was added in pull request #3499: Deprecate all JavaScript instance properties the except init method.

Stop using the .govuk-button--disabled class on buttons

We have deprecated the .govuk-button--disabled class and will remove it in the next major release.

If a Button uses a <button> or <input> element, use the disabled HTML attribute instead.

You will not need to make any changes if you're using the govukButton Nunjucks macro.

Disabling links that are styled to look like buttons will not be supported by future releases.

This was added in pull request #3326: Deprecate govuk-button--disabled class.

Stop using the deprecated Internet Explorer 8 mixins and settings

The next main release of GOV.UK Frontend will remove support for Internet Explorer 8 (IE8). In preparation for this, we've deprecated the settings and mixins used when generating IE8 specific stylesheets.

You'll start seeing deprecation warnings if you're:

• using the govuk-if-ie8 and govuk-not-ie8 mixins in your own Sass code (for example @include govuk-if-ie8)
• changing the $govuk-is-ie8 and $govuk-ie8-breakpoint settings to anything other than their default values

If you no longer need to support IE8, we recommend you stop generating an IE8 specific stylesheet and remove references to the IE8 mixins from your code.

You can also silence these deprecation warnings by adding ie8 to the $govuk-suppressed-warnings setting, but once we’ve released v5.0 you will need to address them as part of the upgrade process.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

• #3255: Including the JavaScript source map in the prototype kit config
• #3272: Add empty alt attribute to logo IE8 fallback PNG
• #3306: Re-enable complete hover link styles on the footer
• #3312: Add default value for warning text icon fallback attribute
• #3426: Add organisation brand colour for Department for Business & Trade - thanks to Barbara Slawinska for contributing this change
• #3454: Update default link underline offset setting